<!--个人账号密码登录-->
<template>
  <default-layout>
    <header-back :fixed="false" slot="header" title="用户注册">
      <router-link to="/user-login" slot="right" replace>
        <mt-button>去登陆</mt-button>
      </router-link>
    </header-back>
    <div class="form" slot="main">
      <yd-cell-group>
        <yd-cell-item>
          <span slot="left" class="label">
            <i class="xffont xf-phone"></i>
          </span>
          <xf-input
            slot="right"
            :valid="[{required: true, msg: '请输入手机号'}, {reg: $regex.phone, msg: '请输入正确的手机号'}]"
            v-model="form.phoneNumber"
            ref="phoneNumber"
            placeholder="请输入手机号"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label">
            <i class="xffont xf-yanzhengma"></i>
          </span>
          <xf-input
            slot="right"
            :valid="[{required: true, msg: '请输入验证码'}]"
            v-model="form.idenCode"
            ref="idenCode"
            class="input-code"
            :show-icon="false"
            placeholder="请输入验证码"></xf-input>
          <mt-button
            slot="right"
            type="primary"
            size="small"
            plain
            class="code-btn"
            @click="sendCode"
            :disabled="loadingCode > 0">{{loadingCode > 0 ? `${loadingCode}s` : '获取验证码'}}</mt-button>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label">
            <i class="xffont xf-cardid"></i>
          </span>
          <xf-input
            slot="right"
            :valid="[{required: true, msg: '请输入身份证号'}, {reg: $regex.idCard, msg: '身份证格式不正确'}]"
            v-model="form.idCard"
            ref="idCard"
            placeholder="请输入身份证号"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label">
            <i class="xffont xf-wode1"></i>
          </span>
          <xf-input
            slot="right"
            :valid="[{required: true, msg: '请输入姓名'}, {reg: /^.{0,20}$/, msg: '姓名最多20个字符'}]"
            v-model="form.realName"
            ref="realName"
            placeholder="请输入姓名"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label">
            <i class="xffont xf-suo"></i>
          </span>
          <xf-input
            slot="right"
            type="password"
            :valid="[{required: true, msg: '请输入密码'}, {reg: $regex.password, msg: '密码只能使用字母、数字、下划线，长度6-16位'}]"
            v-model="form.password"
            ref="password"
            placeholder="请输入密码"></xf-input>
        </yd-cell-item>
      </yd-cell-group>
      <mt-button type="primary" size="large" @click="onSubmit" class="btn-login">立即注册</mt-button>
      <!--<div class="reg-agreement">注册及代表同意 <router-link to="/user-register/agreement">《《河南政务服务网用户协议》》</router-link></div>-->
    </div>
    <transition name="router" mode="out-in">
      <router-view class="fixed-router"></router-view>
    </transition>
  </default-layout>
</template>
<script>

  import XfInput from '../../components/xf-input/xf-input.vue'
  import {validate} from '../../common/js/util'
  import {mapMutations} from 'vuex'
  import DefaultLayout from '../../layouts/default-layout/default-layout'
  import HeaderBack from '../../components/header-back/header-back'

  export default {
    components: {HeaderBack, DefaultLayout, XfInput},
    data() {
      return {
        form: {
          phoneNumber: '', // 手机号
          idenCode: '', // 验证码
          idCard: '', // 身份证号
          realName: '', // 姓名
          password: '' // 密码
        },
        loadingCode: 0
      }
    },
    methods: {
      ...mapMutations({
        setUserInfo: 'SET_USER_INFO'
      }),
      onSubmit() {
        validate.bind(this)(this.form).then(() => {
          this.register()
        })
      },
      handleCode() {
        this.loadingCode = 60
        let timer = setInterval(() => {
          if (this.loadingCode <= 0) {
            clearInterval(timer)
            return
          }
          this.loadingCode--
        }, 1000)
      },
      sendCode() {
        validate.bind(this)({phoneNumber: ''}).then(() => {
          this.$post('sapi/public/person/login/sendIdenCode', {
            phoneNumber: this.form.phoneNumber
          }, loading => { this.$message.loading(loading) }).then(res => {
            this.handleCode()
            this.$message.toast(res.message)
          })
        })
      },
      register() {
        validate.bind(this)(this.form).then(() => {
          this.$post('sapi/public/person/reg', this.form, loading => { this.$message.loading(loading) }).then(res => {
            this.$message.alert(res.message).then(() => {
              this.$router.replace({
                name: 'userLogin'
              })
            })
          })
        })
      }
    },
    created() {}
  }
</script>
<style lang="scss" scoped>
  @import "../../common/style/variable";
  .input-code{
    width: auto;
    flex: 1;
  }
  .code-btn{
    white-space: nowrap;
  }
  .reg-agreement{
    padding: .2rem;
    text-align: center;
    a{
      color: $primary;
    }
  }
  .label{
    width: auto !important;
  }
</style>
